<template>
  <div id="app">
    <button type="button" @click="changeCount">{{count}}</button>
    <p>{{time}}</p>
  <!-- Vue中的路由只能在组件与组件之间进行跳转   -->
    <nav>
      <!-- 声明式路由跳转 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/info">Info</router-link> |
      <router-link to="/xinwen?age=18">xinwen1</router-link> |
      <router-link :to="{path:'/xinwen?name=吴彦祖'}">xinwen2</router-link> |
      <router-link :to="{name:'liudehua',params:{name:'周星驰'}}">xinwen3</router-link> |
      <router-link to="/admin">Admin</router-link> |
      <router-link to="/axios">axios</router-link> |
    </nav>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      count:0,
      time:"",
      interval:""
    }
  },
  methods:{
    changeCount(){
      this.count ++
    }
  },
  watch:{
    $route(to,from){
      console.log("to",to)
      // console.log("from",from)
    }
  },
  beforeCreate() {
    console.log("Vue实例开始创建，此时只有el属性挂载成功。")
  },
  created() {
    // this.interval = setInterval(()=>{
    //   this.time = new Date().toLocaleString();
    // },1000);
    // /*最常用的生命周期函数之一*/
    // console.log("Vue实例创建成功，此时data、methods等属性都已经完成挂载可以使用。但是组件还未完成挂载。")
  },
  beforeMount() {
    console.log("组件开始挂载")
  },
  mounted() {
    console.log("组件挂载完成")
  },
  beforeUpdate() {
    console.log("data中的值",this.count)
    console.log("页面中的值",document.querySelector("button").innerText)
    console.log("开始执行渲染，此时data中数据更新已经完成，页面渲染还未完成。")
  },
  updated() {
    /*除了update相关声明周期会多次执行外，其他的声明周期都只会执行一次。*/
    console.log("更新完成，此时data中数据更新，和页面内容重新渲染都已经完成。")
  },
  beforeDestroy() {
    /*实际开发中，会在这里来取消数据或事件的绑定行为*/
    /*在此处取消created中绑定的计时器*/
    clearInterval(this.interval)
    console.log("开始执行卸载,此时data和methods的数据依然可用")
  },
  destroyed() {
    console.log("卸载完成")
  }
  /*
  * npm install 模块名@版本号
  * 不加@版本号则会默认下载最新版
  * install可以简写为i
  * install替换为uninstall表示删除这个组件的引用
  * 最后追加 -dev或者-D 表示这个插件只在开发时使用
  * 最后追加 -save或者-S 表示这个插件在开发时和运行时都可以使用，默认为save模式
  * 最后追加 -g表示这个模块添加为全局模式
  *
  * 通过npm install安装的组件，相关文件会存入node_modules中，他的信息记录在package.json中。
  *
  * */
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
